<template>
  <div class="bgcolor">
    <details-banner :bannerList = bannerList></details-banner>
    <details-header></details-header>
    <details-information :informationList = informationList></details-information>
    <details-price :priceList = priceList></details-price>
    <details-booking v-if="flag" :bookingList = bookingList></details-booking>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// 顶部景区信息组件
import DetailsBanner from './pages/Banner'
// 头部景区名横幅组件
import DetailsHeader from './pages/Header'
// 景点信息组件
import DetailsInformation from './pages/Information'
// 门票价格组件
import DetailsPrice from './pages/Price'
// 购票组件
import DetailsBooking from './pages/Booking'
export default {
  name: 'Details',
  components: {
    DetailsBanner,
    DetailsHeader,
    DetailsInformation,
    DetailsPrice,
    DetailsBooking
  },
  data () {
    return {
      bannerList: [],
      informationList: [],
      priceList: [],
      bookingList: [],
      changeScenicSpot: '',
      flag: false
    }
  },
  computed: {
    ...mapState(['city']),
    ...mapState(['scenicSpot'])
  },
  methods: {
    // 获取景点数据
    getScenicSpotHttp () {
      // console.log('发送请求')
      this.$http.get('api/details.json')
        .then((res) => {
          // 获取json文件里的城市名对象
          const data = res.data.data
          // console.log(data);
          // 循环所有城市，通过forEach拿到他们的项(item)
          data.forEach((item, index) => {
            /*
            通过item.city 和vuex里的city(vuex里的city表示选择的城市名)，比较，相等
            的一项就是该城市的所有数据
            */
            if (this.city === item.city) {
              // 将item里所有景点的数据放入itemx
              const itemx = item.detailsData
              // console.log(itemx);
              // for in循环得到键和值
              for (const key in itemx) {
                // console.log(this.scenicSpot)
                // itemx[key].nameOfScenicSpot为所点击的景点的名字 和vuex中的景区名判定将哪个景区的数据传入
                if (itemx[key].nameOfScenicSpot === this.scenicSpot) {
                  // 将所点击的集合传进子组件进行动态数据渲染
                  this.bannerList = itemx[key].bannerList
                  this.informationList = itemx[key].informationList
                  this.priceList = itemx[key].priceList
                  this.bookingList = itemx[key].bookingList
                  this.flag = true
                  // console.log('成功识别')
                }
              }
            }
          })
        })
    }
  },
  mounted () {
    this.changeScenicSpot = this.scenicSpot
    this.getScenicSpotHttp()
  },
  // 只要使用了KeepAlive标签 它会生成一个生命周期函数
  activated () {
    // 因为使用了KeppAlive缓存了 导致进入其他页面时候的所显示的页面是之前的显示的页面的高度
    // 解决：
    document.documentElement.scrollTop = 0
    // 判断changeScenicSpot和重新点击的城市是否相等
    // 如果不相等，那么就要重新发送一次数据请求 并且将点击的城市再次赋给changeCity
    if (this.changeScenicSpot !== this.scenicSpot) {
      this.getScenicSpotHttp()
      // console.log('数据不同，发送数据请求')
      this.changeScenicSpot = this.scenicSpot
    }
  }
}
</script>

<style lang="stylus" scoped>
  .bgcolor
    background #f5f5f5
</style>
